<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="./favicon.ico">
  <!-- import CSS -->
  <link rel="stylesheet" href="./css/ele.css">
  <script>
      document.write(`<link rel="stylesheet" href="./css/index.css?v=${Math.random()}">`);
  </script>
  
</head>
<body>
  <div id="mn" v-cloak>
    <div class="user"><img :src="user.avatar" alt="" /><span>欢迎您，{{user.nickname}}</span></div>
    <div class="fea">
      <div class="l">
        <span @click="play()" style="cursor: pointer;"><i class="el-icon-video-play pp"  v-if="!isPlay"></i>
        <i class="el-icon-video-pause pp" v-else></i></span>
      </div>
      <div class="r">
        <el-button @click="getMv">刷新</el-button>
        <span>刷新时间设置：</span>
        <el-input v-model="refreshTime" style="width: 100px;"></el-input>
      </div>
    </div>  
    <el-row>
        <el-col :span=18 class="left">
          <iframe :src="mv" width="1000px" height="600px"  frameborder="0"></iframe>
            <!-- <img class="mv" :src="mv" ref="l_img"  alt=""> -->
        </el-col>
        <el-col :span=6 class="right">
            <ul>
                <li v-for="item in mvList">
                    <img class="mv_thum" :src="item" @click="zoom($event)" ref="" alt="">
                </li>
            </ul>
        </el-col>
    </el-row>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="./js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="./js/ele.js"></script>
  <script src="./js/axios.js"></script>
  <script src="./js/jquery.js"></script>
  <script src="./js/layer-v3.5.1/layer/layer.js"></script>
  <script>
    document.write(`<script src="/js/api.js?v=${Math.random()}"><\/script>`);
    document.write(`<script src="/js/modules/mn.js?v=${Math.random()}"><\/script>`);
  </script>
</html>